<template>
    <div class="entrust-form">
        <div class="money-info">
            <el-tag size="large" :disable-transitions="true">总资金: </el-tag>
            <el-tag size="large" type="success" :disable-transitions="true">可用资金: </el-tag>
        </div>
        <el-form  :show-message="true" >
            <el-form-item label="证券代码" prop="securityId" >
                <el-input ref="focusInput" >
                    
                </el-input>
            </el-form-item>
            <el-form-item label="报价类型" prop="ordType" required :show-message="false">
                <el-select  placeholder="报价类型" size="default">
                    
                </el-select>
            </el-form-item>
            <el-form-item label="委托价格" prop="ordPrice" >
                <el-input-number :min="0" :controls="false" :precision="3" ></el-input-number>
            </el-form-item>
            <el-form-item label="委托数量" prop="ordQty" >
                <el-input-number :min="0" :controls="true" :step="100" controls-position="right" ></el-input-number>
            </el-form-item>
        </el-form>
        <div class="price-show">
            <el-tag size="large" type="danger" effect="dark" :disable-transitions="true"></el-tag>
            <el-tag size="large" effect="dark" :disable-transitions="true">
                
            </el-tag>
            <el-tag size="large" type="success" effect="dark" :disable-transitions="true"></el-tag>
        </div>
        <div class="action-btn">
            <el-button type="danger" >买入&nbsp;F3</el-button>
            <el-button type="success" >卖出&nbsp;F4</el-button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.entrust-form {
    max-width: 380px;
    padding: 2px;

    .el-select {
        width: 100%;
    }

    .el-input-number {
        width: 100%;

    }

    :deep(.el-input-number .el-input__inner) {
        text-align: left;
    }

    .money-info {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .price-show {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .el-tag {
            width: 120px;
        }
    }

    .action-btn {
        display: flex;
        justify-content: space-between;
        .el-button {
            min-width: 120px;
        }
    }
}
</style>